<%page expression_filter="h"/>
<%!
from django.utils.translation import gettext as _
from openedx.core.djangolib.js_utils import dump_js_escaped_json
%>
<link href="//cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/simplePagination.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jinplace/1.2.1/jinplace.min.js"></script>
    <nav style="text-align: center">
        <br>
        <div id="video_upload_pagination" style="display: inline-block"></div>
        <br>
        <span id="videos_per_page"
            data-ok-button="${_('Submit')}"
            data-cancel-button="${_('Cancel')}"
            data-data="${pagination_context['items_on_one_page']}"
            data-placeholder="${_('Changing..')}"
            data-activator="#edit-activator">
            ${_('Videos per page:')} ${pagination_context['items_on_one_page']}
        </span>
        <button id="edit-activator" class="btn-default edit-button action-button">
            <span class="icon fa fa-pencil" aria-hidden="true"></span>
            <span class="action-button-text">${_("Change")}</span>
        </button>
    </nav>
<script>
    $(function() {
        $('#video_upload_pagination').pagination({
            pages: "${pagination_context['total_pages']| n, dump_js_escaped_json}",
            currentPage:"${pagination_context['current_page']| n, dump_js_escaped_json}",
            cssStyle: 'light-theme',
            hrefTextPrefix:"?page=",
        });
        $('#videos_per_page').jinplace({
        }).on('jinplace:done',
            function() {
                window.location = window.location.pathname;
        });
    });
</script>
